<!--  -->
<template>
  <div class="poster">
    <div class="poster-content">
      <div class="close" @click="closePosterFn">
        <i class="iconfont icon-round_delete"></i>
      </div>
      <div class="poster-img">
        <img :src="posterImg" alt />
      </div>
      <div class="tips">长按保存至相册</div>
    </div>
    <div class="poster-canvas">
      <div class="hidecanvas">
        <canvas ref="mycanvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    posterDatas: Object,
  },
  data() {
    //这里存放数据
    return {
      posterImg: "",
    };
  },
  methods: {
    closePosterFn() {
      this.$emit("closePosterFn", false);
    },
    createPosterFn() {
      //该方法用来生成海报
      //定义canvas画布
      var canvas = this.$refs.mycanvas;
      var ctx = canvas.getContext("2d"); //定义2d画布
      // console.log(window);
      let W = window.screen.availWidth;
      let H = window.screen.availHeight;
      let devicePixelRatio = window.devicePixelRatio || 1;
     

      canvas.width = W * devicePixelRatio;
      canvas.height = H * devicePixelRatio;

      canvas.style.width = W * devicePixelRatio + "px";
      canvas.style.height = H * devicePixelRatio + "px";
      ctx.scale(devicePixelRatio, devicePixelRatio);

      //绘制白色画布
      //通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布：
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      //定义一个白色  rgba    a的值为0-255  0完全透明   255完全不透明
      for (var i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i + 0] = 255;
        imgData.data[i + 1] = 255;
        imgData.data[i + 2] = 255;
        imgData.data[i + 3] = 255;
      }
      ctx.putImageData(imgData, 0, 0);

      //绘制海报图
      var img = new Image(); //<img/>
      img.src = this.posterDatas.posterImg;
      img.onload = function () {
        ctx.drawImage(img, 0, 0, W, W);
      };

      //绘制价格
      ctx.font = "30px Arial"; //字体大小及类型  英文通常用Arial
      ctx.fillStyle = "#ff5555"; //填充颜色
      ctx.textAlign = "start"; //设置文本对齐方式
      ctx.fillText("￥" + this.posterDatas.shop_price, 10, W + 50);

      //绘制标题1
      ctx.font = "24px Arial"; //字体大小及类型  英文通常用Arial
      ctx.fillStyle = "#333333"; //填充颜色
      ctx.textAlign = "start"; //设置文本对齐方式
      ctx.fillText(this.posterDatas.goods_name.slice(0,18), 10, W + 100);
      //绘制标题2
      ctx.font = "24px Arial"; //字体大小及类型  英文通常用Arial
      ctx.fillStyle = "#333333"; //填充颜色
      ctx.textAlign = "start"; //设置文本对齐方式
      ctx.fillText(
        this.posterDatas.goods_name.slice(18,30) + "...",
        10,
        W + 140
      );

      //绘制二维码
      var img2 = new Image(); //<img/>
      img2.src = this.posterDatas.codeImg;
      img2.onload = function () {
        ctx.drawImage(img2, W / 3, W + 160, W / 4, W / 4);
      };

      //生成一个dataUrl
      setTimeout(() => {
        this.posterImg = canvas.toDataURL();
      }, 500);
    },
  },
  mounted() {
    setTimeout(() => {
      this.createPosterFn();
    }, 1000);
  },
};
</script>
<style lang="less">
.poster {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  .poster-content {
    width: 80%;
    margin-left: 10%;
    background: #fff;
    height: 100%;
    height: calc(100% - 10rem);
    margin-top: 5rem;
    position: relative;
    z-index: 9999;
    .close {
      width: 4.4rem;
      height: 4.4rem;
      position: absolute;
      right: 1rem;
      top: -3.4rem;
      color: #fff;
      text-align: center;
      i {
        font-size: 2rem;
      }
      &::after {
        content: " ";
        height: 1.3rem;
        width: 2px;
        display: block;
        background: #fff;
        margin: 0 auto;
      }
    }
    .poster-img {
      img {
        width: 100%;
      }
    }
    .tips {
      width: 100%;
      height: 3rem;
      position: absolute;
      bottom: -3rem;
      left: 0;
      text-align: center;
      font-size: 1.3rem;
      color: #fff;
    }
  }
  .poster-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    .hidecanvas {
      display: none;
    }
  }
}
</style>